<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/page/common/commonConfig.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
	<head>
		<title>更新头像</title>
		<link type="text/css" rel="Stylesheet" href="<%=basePath%>component/piccut/main.css" />
	    <script type="text/javascript" src="<%=basePath%>component/piccut/jquery1.2.6.pack.js"></script>
	    <script type="text/javascript" src="<%=basePath%>component/piccut/ui.core.packed.js" ></script>
	    <script type="text/javascript" src="<%=basePath%>component/piccut/ui.draggable.packed.js" ></script>
	    <script type="text/javascript" src="<%=basePath%>component/piccut/CutPic.js"></script>
	</head>

	<body onload="bodyInit()">
	  <div style="font-size:6px;font-family:微软雅黑,宋体;overflow: auto;height: 100%;">
		<table border="0" width="100%" height="90%">
			<tr>
				<td valign="top" height="50%"><!--当前照片-->
					<div class="title"><b>当前照片</b></div>
					<div class="photocontainer" style="background:url('<%=basePath%>component/piccut/img/bg_120.gif') no-repeat left top;">
						<c:if test="${!empty imgName}">
							<img id="imgphoto" src="<%=basePath%>temp/${imgName}" style="border-width:0px;" />
							<p>
								<a class="button" href="javascript:validateClear();"><span>删除头像</span></a>
							</p>
						</c:if>
						<c:if test="${empty imgName}">
							<img id="imgphoto" src="<%=basePath%>component/piccut/img/man.GIF" style="border-width:0px;" />
						</c:if>
					</div>
					<br/>
					<br/>
					<form name="uploadForm" method="post" action="<%=basePath%>system-user/UserAction!userImgUpload.action" enctype="multipart/form-data">
						<input type="hidden" name="userMainId" id="userMainId" value="${userMainId }" />
			            <div class="title"><b>更换照片</b></div>
			            <c:if test="${!empty filelength}">
							<font color="red">文件过大，请重新上传</font>
						</c:if>
			            <div id="uploadcontainer">
			                <div class="uploadtooltip">请选择新的照片文件，文件需小于1MB</div>
			                <div class="uploaddiv">
			                	<input type="file" name="userImg" id="userImg" title="选择照片" />
			                </div>
			            </div>
					</form>
					<a class="button" href="javascript:validateUpload();"><span>上 传</span></a>
				</td>
				<c:if test="${!empty uploadImgName}">
				<td rowspan="2" valign="top"><!--编辑照片-->
					<div class="title"><b>裁切头像照片</b></div>
					<div class="uploadtooltip">您可以拖动照片以裁剪满意的头像</div>                           
					<div id="Canvas" class="uploaddiv">
						<div id="ImageDragContainer">                               
							<img id="ImageDrag" class="imagePhoto" src="<%=basePath%>temp/${uploadImgName }" style="border-width:0px;" />                                                        
						</div>
						<div id="IconContainer">                               
							<img id="ImageIcon" class="imagePhoto" src="<%=basePath%>temp/${uploadImgName }" style="border-width:0px;" />                                                        
						</div>                          
					</div>
					
					<div class="uploaddiv">
						<table>
							<tr>
								<td id="Min">
									<img alt="缩小" src="<%=basePath%>component/piccut/img/_c.gif" onmouseover="this.src='<%=basePath%>component/piccut/img/_c.gif';" onmouseout="this.src='<%=basePath%>component/piccut/img/_h.gif';" id="moresmall" class="smallbig" />
		                        </td>
		                        <td>
		                            <div id="bar" style="background:url('<%=basePath%>component/piccut/img/track.gif') no-repeat;">
										<div class="child" style="background:url('<%=basePath%>component/piccut/img/grip.gif') no-repeat;"></div>
									</div>
								</td>
		                        <td id="Max">
									<img alt="放大" src="<%=basePath%>component/piccut/img/c.gif" onmouseover="this.src='<%=basePath%>component/piccut/img/c.gif';" onmouseout="this.src='<%=basePath%>component/piccut/img/h.gif';" id="morebig" class="smallbig" />
		                        </td>
		                    </tr>
		                </table>
					</div>
					
					<form name="editForm" method="post" action="<%=basePath%>system-user/UserAction!userImgEdit.action">
						<input type="hidden" name="userMainId" id="userMainId" value="${userMainId }"/>
						<input type="hidden" name="imgName" id="imgName" value="${uploadImgName }"/>
						<div style="display:none;">
							图片实际宽度： <input name="txt_width" type="text" value="1" id="txt_width" /><br />
							图片实际高度： <input name="txt_height" type="text" value="1" id="txt_height" /><br />
							距离顶部： <input name="txt_top" type="text" value="82" id="txt_top" /><br />
							距离左边： <input name="txt_left" type="text" value="73" id="txt_left" /><br />
							截取框的宽： <input name="txt_DropWidth" type="text" value="120" id="txt_DropWidth" /><br />
							截取框的高： <input name="txt_DropHeight" type="text" value="120" id="txt_DropHeight" /><br />
							放大倍数： <input name="txt_Zoom" type="text" id="txt_Zoom" />
						</div>  
					</form>
					<a class="button" href="javascript:validateEdit();"><span>保存头像</span></a>
				</td>
				</c:if>
			</tr>
			<tr>
				<td valign="top" height="50%"><!--保存照片-->
					
				</td>
			</tr>
		</table>
		
		<form action="<%=basePath%>system-user/UserAction!userImgEditClear.action" method="post" name="clearForm">
			<input type="hidden" name="userMainId" id="userMainId" value="${userMainId }" />
		</form>
	  </div>
	</body>
	
	<script type="text/javascript">
	function bodyInit(){
		//validatePower();
		changeHeadPortrait();
	}

	function validateUpload(){
		if(document.forms["uploadForm"].userImg.value == ''){
			myAlert('请先选择头像文件');
			return;
		}
		waitingWindow();
		document.forms["uploadForm"].submit();
	}

	function validateEdit(){
		waitingWindow();
		document.forms["editForm"].submit();
	}

	function validateClear(){
		waitingWindow();
		document.forms["clearForm"].submit();
	}
	function changeHeadPortrait(){
		if('${!empty changeImg}' == 'true'){
			if('${userMainId == user.userMainId}' == 'true'){
				var imgphoto = document.getElementById('imgphoto');
				var src = imgphoto.src;
				parent.parent.parent.changeHeadPortrait(src);
			}
		}
	}
	</script>
	
</html>
